<template>
  <div class="app-container billindex">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">

      <el-form-item label="合同名称" prop="roomnumber">
        <el-input
          v-model="queryParams.contarctName"
          placeholder="请输入合同名称"
          clearable
          size="small"
        />
      </el-form-item>

      <!--<el-form-item label="租赁期限" prop="contarctName">
        <el-date-picker
          v-model="queryParams.contractTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="付款周期" prop="floorId">
        <el-select v-model="queryParams.floorId" placeholder="请输入付款周期" clearable size="small">
          <el-option
            v-for="dict in [0,1,2,3,4]"
            :key="dict"
            :label="dict"
            :value="dict"
          />
        </el-select>
      </el-form-item>-->
      <el-form-item label="账单名称" prop="roomnumber">
        <el-input
          v-model="queryParams.billName"
          placeholder="请输入账单名称"
          clearable
          size="small"
        />
      </el-form-item>

      <el-form-item label="账单时间" prop="contarctName">
        <el-date-picker
          v-model="queryParams.timeSection"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

    </el-form>

    <el-button class="selectHouse" type="primary" size="mini" @click="newFee">新建费项</el-button>

    <el-table
      ref="multipleTable"
      :data="incomeList"
      tooltip-effect="dark">
      <el-table-column
        label="费项名称">
        <template slot-scope="scope">{{ scope.row.feeName }}</template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="金额（元）">
        <template slot-scope="scope">{{ scope.row.fee }}</template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="inComeDelete(scope.row)"
            v-hasPermi="['house:house:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--<el-tabs v-model="activeName">
      <el-tab-pane label="固定账单" name="0">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark">
          <el-table-column
            label="账单开始时间">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="账单结束时间">
          </el-table-column>
          <el-table-column
            prop="address"
            label="账单收款日">
          </el-table-column>
          <el-table-column
            prop="address"
            label="租金（元）">
          </el-table-column>
          <el-table-column
            prop="address"
            label="物业管理费（元）">
          </el-table-column>

          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['house:house:update']"
              >编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="其他账单" name="1">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark">
          <el-table-column
            label="费项名称">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="款项类型">
          </el-table-column>
          <el-table-column
            label="账单开始时间">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="账单结束时间">
          </el-table-column>
          <el-table-column
            prop="address"
            label="账单收款日">
          </el-table-column>
          <el-table-column
            prop="address"
            label="费用（元）">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>-->

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <div class="footer">
<!--      <el-button @click="setpayplan">生成付款计划</el-button>-->
      <el-button type="primary" @click="addCustomBill">提交</el-button>
      <el-button @click="close">关闭</el-button>
    </div>

    <!-- 新建费项目 -->
    <el-dialog title="新建费项目" :visible.sync="open" width="700px" append-to-body class="tanchuang">
      <el-form class="selectHouse" :model="incomeParam" :rules="rules" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="费项名称" prop="income">
          <el-select v-model="incomeParam.income" placeholder="请输入费项名称" clearable size="small">
            <el-option
              v-for="dict in feeSetList"
              :key="dict.id"
              :label="dict.feeName"
              :value="JSON.stringify(dict)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="金额（元）" prop="fee">
          <el-input
            v-model="incomeParam.fee"
            placeholder="请输入金额（元）"
            clearable
            size="small"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addFeeItem">添加</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<style lang="scss">
  .app-main {
    background: #E7E7E7;
  }

  .app-container {
    margin: 15px;
    background: #fff;
    border-radius: 5px;
  }

  .selectHouse .el-form-item__label{
    width:auto !important;
  }
  .selectHouse .el-form-item__content{
    margin-left:auto !important;
  }

  .billindex, .tanchuang {
    .el-form--inline .el-form-item {
      display: flex !important;
      width: 70%;
      margin: 0 auto 22px;
    }

    .el-form-item__label {
      width: 100px !important;
    }

    .el-form-item--medium .el-form-item__content {
      flex: 1;
    }

    .el-date-editor.el-input,
    .el-select {
      width: 100%;
    }

    .selectHouse, .el-table {
      margin-bottom: 20px;
    }

    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
    }
    .footer{
      text-align:right;
      margin:80px 0 35px;
    }
  }
</style>
<script>
import { getContarct } from "@/api/contarct/contarct";
import { listFeesetNoPage } from "@/api/feeset/feeset"
import { insertCustomBill } from "@/api/contarctbill/contarctbill"

  export default {
    name: "Contarct",
    // dicts: ['sys_status', 'contarct_status', 'rent_month_type', 'unit_type'],
    data() {
      return {
        total: 2,
        queryParams: {
        },
        incomeParam: {
        },
        tableData: [{}],
        open: false,
        activeName: "0",
        billopen: false,
        feeSetList: [],
        incomeList: [],
        rules: {
          income:/*[
            {required: true, message: "费项名称不能为空！", trigger: "change"}
          ],*/
          this.commonRequired("费项名称不能为空！"),
          fee: /*[
            {required: true, message: "金额不能为空！", trigger: "blur"}
          ]*/
          this.commonRequired("金额不能为空！")
        },
      };
    },
    created() {
      this.getContartctInfo()
      this.getfeeSetList()
    },
    methods: {
      commonRequired(value) {
        return this.conductionData.commonFun.commonRequired(value);
      },
      // 新建费项
      newFee() {
        this.open = true;
      },
      // 费项删除
      inComeDelete(row) {
        console.log("remove"+JSON.stringify(this.incomeList))
        for(var i=0;i< this.incomeList.length;i++) {
            if(this.incomeList[i].feetypeid === row.feetypeid) {
              this.incomeList.splice(i, 1)
            }
        }
      },
      // 取消费项弹窗
      cancel() {
        this.open = false;
      },
      // 确定添加费项
      addFeeItem() {
        const incomeItem = {
          feetypeid: JSON.parse(this.incomeParam.income).id,
          feeName: JSON.parse(this.incomeParam.income).feeName,
          fee: this.incomeParam.fee
        }
        this.incomeList.push(incomeItem)
        this.incomeParam ={}
        this.open = false;
      },
      // 生成账单
      getList() {

      },
      // 固定账单编辑
      handleUpdate(row) {
        this.billopen = true;
      },
      // 取消账单编辑弹窗
      billcancel() {
        this.billopen = false;
      },
      // 保存账单编辑
      billsubmitForm() {
        this.billopen = false;
      },
     /* //生成付款计划
      setpayplan(){

      },*/
      //提交
      send(){
        this.$router.go(-1);
      },
      //关闭
      close(){
        this.$router.go(-1);
      },
      getContartctInfo() {
        getContarct(this.conductionData.contractId).then(response => {
          this.queryParams = response.data
        })
      },
      getfeeSetList() {
        listFeesetNoPage().then(response => {
          this.feeSetList = response.data
        })
      },
      addCustomBill(){
        const resquest={
          conctartId: this.queryParams.id,
          billName : this.queryParams.billName,
          contarctPlanStartdate : this.queryParams.timeSection[0],
          contarctPlanEnddate : this.queryParams.timeSection[1],
          incomeList : this.incomeList
        }
        insertCustomBill(resquest).then(response =>{
            console.log(response);
            this.$router.go(-1);
        })
      }
    }
  };
</script>
